import React, { useRef, useState } from 'react';
import { PullRefresh, List, Grid, Cell ,Sidebar, Toast,Image} from 'react-vant';
import type { ListInstance } from 'react-vant';
import { useSelector ,useDispatch } from 'react-redux';
import { STORETYPE,PROPSTYPE } from '../../Type/Store.d';
import { useNavigate } from 'react-router-dom';
function ClassItem() {
    const Navigate = useNavigate();
    const Dispatch = useDispatch();
    const [active, setActive] = useState(0);
    const [isLoading,serIsLoading] = useState(false);
    const [Page,setPage] = useState(0);

    const list = useSelector((state:STORETYPE)=>state.list);
    // const childrenList = useSelector((state:STORETYPE)=>state.childrenList);  // 截取数据
    const [NewchildrenList,setNewchildrenList] = useState((list[0].children as PROPSTYPE[]).slice(0,6));  // 截取后的数据

    const listRef = useRef<ListInstance>(null);
    // const [list, setList] = useState<Array<number>>([]);
    const [finished, setFinished] = useState<boolean>(false);
    // 上拉
    const onLoadRefresh = async () => {
        serIsLoading(true);
        setTimeout(() => {
            setPage(Page + 1);
            setNewchildrenList((list[0].children as PROPSTYPE[]).slice(0,6 * Page))
            if(NewchildrenList.length>=(list[0].children as PROPSTYPE[]).length){
                setFinished(true);
            }
            serIsLoading(false);
        }, 2000);
        
    };
    // 下拉
    const onRefresh = async () => {
        setFinished(false);
        setPage(1);
        setNewchildrenList((list[0].children as PROPSTYPE[]).slice(0,6 * Page))
    };

    return (
        <div className='ClassItem'>
            <Sidebar
                value={active}
                onChange={(v) => {
                    setActive(v);
                    // Toast.info(`标签名 ${v + 1}`);
                    // Dispatch({
                    //     type:INDEXTAB,
                    //     payload:v
                    // })
                    setNewchildrenList((list[v].children as PROPSTYPE[]).slice(0,6 * Page))
                }}
            >
                {
                    list.map((item,index)=>{
                        return <Sidebar.Item title={item.txt} key={index}>
                            <PullRefresh
                                onRefresh={onRefresh}
                                // 刷新结束后检查是否继续请求
                                onRefreshEnd={() => listRef.current?.check()}
                                >
                                {/* List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果 */}
                                <List ref={listRef} loading={isLoading} finished={finished} onLoad={onLoadRefresh}>
                                    {NewchildrenList.map((v, i) => (
                                        <Cell key={i} title={
                                            <>
                                            <Image width="60" height="60" src={v.src} />
                                            <p>{v.txt} &emsp; {i+1}</p>
                                            </>
                                        } 
                                        onClick={()=>Navigate('/Detail/'+v.id,{state:v})}/>
                                    ))}
                                </List>
                            </PullRefresh>
                        </Sidebar.Item>
                    })
                }
            </Sidebar>
        </div>
    )
}

export default ClassItem